<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>使用插槽</title>
        <style type="text/css">
            #root { margin: 15px auto; width: 80vw; }
            .wrapper { margin: 10px; border: 1px solid blue; }
            .wrapper>* { margin: 10px; }
            .first { border: 1px solid red; }
            .second { border: 1px solid green; }
        </style>
    </head>
    <body>

        <div id="root">
            <div class="wrapper">
                <p>单个插槽</p>
                <!-- 在`first-component`标签体内书写的所有内容都将分发给子组件 -->
                <first-component>
                    <button>按钮</button>
                    <hr>
                    <p>段落</p>
                </first-component>
            </div>
            <div class="wrapper">
                <p>具名插槽( named slot )</p>
                <second-component>
                    <!-- 根据插槽名称来向指定插槽分发内容 -->
                    <template v-slot:header>
                        <h5>顶部内容</h5>
                    </template>
                    <template v-slot:default>
                        <div>main</div>
                        <p>hello</p>
                    </template>
                    <template v-slot:footer>
                        <h6>底部内容</h6>
                    </template>
                </second-component>
            </div>

            <div class="wrapper">
                <a href="https://v3.cn.vuejs.org/api/directives.html#v-slot">
                    指令: v-slot
                </a>
                ( 官方API参考 )
            </div>
        </div>
        

        <!-- 导入 vue.js 3.x 核心库 -->
        <script src="../scripts/vue@3.2.31.js"></script>

        <script>
            const First = {
                template: `<div class="first">
                              <slot>
                                 <p>当父组件没有分发内容时默认显示这部分</p>
                              </slot>
                           </div>`
            }

            const Second = {
                template: `<div class="second">
                              <!-- 指定插槽名称 -->
                              <slot name="header">
                                 <p>HEADER</p>
                              </slot>
                              <!-- 未显式指定插槽名称则默认是 default -->
                              <slot>MIDDLE</slot>
                              <!-- 指定过名称的插槽就是具名插槽( named slot ) -->
                              <slot name="footer">
                                 <p>FOOTER</p>
                              </slot>
                           </div>`
            }

            const options = {
                components: {
                    'first-component': First,
                    'second-component': Second
                }
            }
            const app = Vue.createApp(options);
            const root = app.mount('#root');
            console.log( root );
        </script>
        
    </body>
</html>